<template>
	<view class="index">
		<!-- 轮播图 -->
		<u-swiper :list="carouselList"></u-swiper>

		<view class="indeContent">
			<button class="btn" @click="scan">
				<text class="custom-icon custom-icon-canju"></text>
				开始点餐
			</button>

			<!-- 人气菜品 -->
			<view class="popularity">
				<view class="title">人气菜品</view>
				<view class="content">
					<view class="item" v-for="item in recommendList" :key="item._id">
						<view class="info">
							<image src="../../static/images/icons/点赞收藏.png" mode="widthFix"></image>
							<view class="infoContent">
								<view class="name">
									{{item.title}}
								</view>
								<view class="star">
									<image v-for="(v,i) in 5" :key="i" src="../../static/images/icons/星级.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="img">
							<image :src="baseURL + item.thumb" mode="aspectFill"></image>
						</view>

					</view>
				</view>
			</view>
		</view>



		<Tabbar />
	</view>
</template>

<script>
	import Tabbar from '../../components/Tabbar.vue'
	import {
		getRecommend,
		getCarousel
	} from '../../api/api.js'
	import {
		baseURL
	} from '../../api/request.js'

	export default {
		components: {
			Tabbar
		},
		data() {
			return {
				baseURL,
				list: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				}, {
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				}],
				recommendList: [], //推荐列表
				carouselList: [], //轮播图列表
			}
		},
		onLoad() {
			this.getCarousel()
			this.getRecommend()
		},
		methods: {
			//获取轮播图
			async getCarousel() {
				const res = await getCarousel()
				console.log(res);
				res.data.forEach(item => {
					let url = this.baseURL + item.carousel
					this.carouselList.push(url)
				})
			},
			//获取推荐商品
			async getRecommend() {
				const res = await getRecommend()
				this.recommendList = res.data
			},
			//扫码
			scan() {
				uni.scanCode({
					onlyFromCamera: true,
					success(res) {
						getApp().globalData.tableNum = res.result
						uni.switchTab({
							url: '../menu/menu'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		.indeContent {
			padding: 0 30upx;
		}

		.btn {
			width: 90%;
			margin: 30upx auto;
			background-color: $themeColor;
			border-radius: 50upx;
			height: 100upx;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;

			text {
				font-size: 17px;
				margin-right: 5upx;
			}
		}

		.popularity {
			.title {
				margin: 30upx 0;
			}

			.content {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;

				.item {
					width: 48%;
					padding: 20upx 30upx;
					background-color: #fff;
					margin: 7upx;

					.info {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						margin-bottom: 10upx;

						image {
							width: 50upx;
							height: 50upx;
						}
					}

					.infoContent {
						font-size: 12px;
						margin-left: 10upx;

						.star {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							image {
								width: 20upx;
								height: 20upx;
								margin-right: 5upx;
							}
						}
					}

					.img {
						width: 100%;

						image {
							width: 100%;
							height: 130upx;
						}
					}
				}
			}
		}
	}
</style>
